import Page from "../../components/Page/Page";
import { Table, Button, Drawer, Space, Form, Input, InputNumber, notification, Popconfirm, Radio, Cascader ,Select} from "antd";
import { useMemo, useEffect, useState, useRef, useLayoutEffect } from "react";
import { getAllRoom, delRoom, addRoom, editRoom } from '../../api/room'
import { getAllBulid } from "../../api/bulid";
import { getAllType } from "../../api/roomType";
import { floor } from "lodash";

const RoomList = () => {
    const [ bulid,setBulid] = useState([])
    const getBulid = async ()=>{
        let res = await getAllBulid({});
        console.log('res',res)
        const temarr = res.data.map(item=>({
            label:item.name,
            value:item._id,
            children: item.floorInfo.map(it=>({ label:it,value:it }))
        }))
        setBulid(temarr)
    }
    useEffect(()=>{
        getBulid();  
    },[])
    const [type,setType] = useState([]);
    const getTypes =  async ()=>{
        const res = await getAllType({limit:2000});
        setType(res.data.map(item=>({ label: item.name, value:item._id})))
    }
    useEffect(()=>{
        getTypes();  
    },[])
    const columns = [
        {
            title: '房型名称',
            dataIndex: 'name',
        },
        {
            title: '床数量',
            dataIndex: 'beds',
        },
        {
            title: '价格',
            dataIndex: 'price',
        },
        {
            title: '押金',
            dataIndex: 'yaPrice',
        },
        {
            title: '简称',
            dataIndex: 'shortName',
        },
        {
            title: '入住人数',
            dataIndex: 'liveLimit',
        },
        {
            title: '早餐券数量',
            dataIndex: 'couponNum',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (_, record) =>
                data.length >= 1 ? (
                    <Popconfirm title="你确定要删除吗?" onConfirm={() => handleDelete(record.key)}
                        okText="确定" cancelText="取消">
                        <a>删除</a>
                    </Popconfirm>
                ) : null,
        },
    ];
    const onChange = (value) => {
        console.log('changed', value);
    };
    const handleDelete = (key) => {
        const newData = data.filter((item) => item.key !== key);
        setData(newData);
        confirmDel(data[key]._id)
    };
    const [data, setData] = useState([]);
    const [limit, setLimit] = useState(30);
    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);
    const getData = async () => {
        let res = await getAllRoom(limit, page)
        const { success, data, count } = res;
        console.log(res);
        console.log(data);
        for (let a = 0; a < data.length; a++) {
            data[a].key = a
        }
        if (success) {
            setData(data);
            setTotal(count)
        };
    }
    useEffect(() => {
        getData()
    }, [limit, page])
    const confirmDel = async (id) => {
        let res = await delRoom({ typeid: id });
        const { success } = res;
        if (!success) return notification.open({ message: '删除失败', })
        notification.open({ message: '删除成功', })
        getData()
    }
    const formRef = useRef(null)
    const [showAdd, setShowAdd] = useState(false)
    const handleAdd = async () => {
        const values = formRef.current.getFieldsValue(true)
        const {bandf ,...postData} = values
        const [ buildId, floor ] = bandf;
        let res = await addRoom({
            ...postData,
            floor,
            buildId
        });
        const { success } = res
        if (!success) return notification.open({ message: '添加失败', })
        notification.open({ message: '添加成功', })
        getData()
    }
    return (
        <Page title="房间管理">
            <div style={{ padding: '15px' }}>
                <Button type="primary" onClick={() => { setShowAdd(true) }}>添加新的房型</Button>
            </div>
            <Table
                columns={columns}
                dataSource={data}
                pagination={{
                    pageSize: 5,
                }}
            />
            <Drawer
                visible={showAdd}
                size="large"
                onClose={() => { setShowAdd(false) }}>
                <Space>
                    <Button type="primary" onClick={() => { setShowAdd(false); handleAdd() }} >
                        立即添加
                    </Button>
                    <Button onClick={() => { setShowAdd(false) }} style={{ marginRight: '20px' }}>取消</Button>
                </Space>
                <Form ref={formRef}>
                    <Form.Item
                        label="房间名"
                        name="roomName"
                        rules={[
                            {
                                required: true,
                                message: '请填写房间名称',
                            },
                        ]}
                    >
                        <Input placeholder="请填写房间名称" style={{ width: '200px' }} />
                    </Form.Item >
                    <Form.Item label="所在楼层" name="bandf">
                        <Cascader options={bulid}>
                        </Cascader>
                    </Form.Item>
                    <Form.Item label="选择房型">
                        <Select options={type}>
                        </Select>
                    </Form.Item>
                    <Form.Item label="内线电话" name="phone4in">
                        <Input placeholder="请填写内线电话" style={{ width: '200px' }} />
                    </Form.Item>
                    <Form.Item label="外线电话" name="phone4out">
                        <Input placeholder="请填写外线电话" style={{ width: '200px' }} />
                    </Form.Item>
                    <Form.Item label="方向朝向" name="direction">
                        <Radio.Group defaultValue="1" buttonStyle="solid">
                            <Radio.Button value="1">东</Radio.Button>
                            <Radio.Button value="2">西</Radio.Button>
                            <Radio.Button value="3">南</Radio.Button>
                            <Radio.Button value="4">北</Radio.Button>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="是否靠近马路" name="isClose2Road">
                        <Radio.Group defaultValue="0" buttonStyle="solid">
                            <Radio.Button value="1">是</Radio.Button>
                            <Radio.Button value="0">否</Radio.Button>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="是否允许吸烟" name="isSmoke">
                        <Radio.Group defaultValue="0" buttonStyle="solid">
                            <Radio.Button value="1">是</Radio.Button>
                            <Radio.Button value="0">否</Radio.Button>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="是否是噪音房" name="isNoise">
                        <Radio.Group defaultValue="0" buttonStyle="solid">
                            <Radio.Button value="1">是</Radio.Button>
                            <Radio.Button value="0">否</Radio.Button>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="是否是高温房" name="isHigh">
                        <Radio.Group defaultValue="0" buttonStyle="solid">
                            <Radio.Button value="1">是</Radio.Button>
                            <Radio.Button value="0">否</Radio.Button>
                        </Radio.Group>
                    </Form.Item>
                </Form>
            </Drawer>
        </Page>
    )
}

export default RoomList;